﻿<!DOCTYPE html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head th:replace="index/common/head(${webInfo})"></head>
<body>
<div th:replace="index/common/top_header"></div>
<article class="main-content post-page" itemscope="">
    <div class="post-header">
        <div id="directory-content" class="directory-content">
            <div id="directory"></div>
        </div>
        <h1 class="post-title" itemprop="name headline">
            <a th:href="'/article/view/' + ${article.articleSeq}" th:text="${article.title}" data-no-instant=""></a>
        </h1>
        <div class="post-data">
            <time th:datetime="${article.createAt}"
                  itemprop="datePublished"
                  th:text="'发布于 '+ ${pageService.fmtDate(article.createAt)}">
            </time>
            / <a href="#comments" th:text="${article.commentCount ?: 0}+' 条评论'"></a> /
            <th:block th:text="${article.views}"/>
            浏览
        </div>
        <p class="post-tags">
            <a th:each="label:${article.labels}"
               th:href="'/classify/label/' + ${label.labelSeq}">
                [[${label.name}]]
            </a>
        </p>
        <div th:if="${article.hasResource}" class="article-resource">
            <th:block th:if="${loginInfo} != null">
                <span>此文章含有资源可以点击下载</span>
                <div class="file-share-btn">
                    <a id="file-download" th:data="${article.articleSeq}">
                        <p>立即下载</p>
                    </a>
                </div>
            </th:block>
            <th:block th:if="${loginInfo} == null">
                <span>此文章含有资源,登录即可下载</span>
                <div class="file-share-btn">
                    <a href="/login">
                        <p>登录</p>
                    </a>
                </div>
            </th:block>
        </div>
    </div>
    <div id="post-container">
        <div id="post-content" class="post-content" itemprop="articleBody">
            <th:block th:utext="${pageService.renderMarkdown(article.content)}"/>
        </div>
        <p class="post-info">
            本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处<br/>
            最后编辑时间为:
            <th:block th:text="${pageService.fmtDate(article.createAt)}"/>
        </p>
        <div class="related-post-container mb-30">
            <div class="row" th:if="${article.allowLikes}">
                <div class="col-lg-12 col-md-12">
                    <div style="max-width:300px;margin: 5px auto">
                        <button class="btn btn-success " type="button">
                            <i class="icon icon-hand-up"></i> 点个赞
                        </button>
                        <button class="btn btn-warning " type="button">
                            <i class="icon icon-hand-down"></i> 点个踩
                        </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="related-post-title mb-30">相似推荐</h3>
                </div>
            </div>
            <div class="row" th:if=" ${article.relatedArticles} != null ">
                <div class="col-lg-3 col-md-3 mb-sm-20" th:each="relatedArticle : ${article.relatedArticles}">
                    <div class="single-related-post">
                        <div class="image">
                            <a th:href="'/article/view/' + ${relatedArticle.articleSeq}">
                                <img th:src="${relatedArticle.coverImage}" class="img-fluid" th:alt="${relatedArticle.title}"/>
                            </a>
                        </div>
                        <div class="content">
                            <h3 class="related-post-title">
                                <a th:href="'/article/view/' + ${relatedArticle.articleSeq}">
                                    [[${relatedArticle.title}]]
                                </a>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:if="${loginInfo} != null" class="comment-form-container">
        <th:block th:if="${article.allowComment}">
            <h3 class="comment-form-title">发表评论</h3>
            <p>请填写必填项 *</p>
            <div class="comment-form">
                <form action="#" id="commentForm" th:data="${article.articleSeq}">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="message">内容</label>
                                <textarea name="message" id="message"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button type="button" class="fl-btn" onclick="submitComment()">提交评论</button>
                        </div>
                    </div>
                </form>
            </div>
        </th:block>
        <th:block th:if="!${article.allowComment}">
            <h3 class="comment-form-title">此文章未开启评论</h3>
        </th:block>
    </div>
    <div th:if="${loginInfo} == null" class="comment-form-container">
        <th:block th:if="${article.allowComment}">
            <h3 class="comment-form-title">
                您未登录，请登录后发表评论
                <span class="login-btn">
                <a href="/login">登录</a>
            </span>
            </h3>
        </th:block>
        <th:block th:if="!${article.allowComment}">
            <h3 class="comment-form-title">此文章未开启评论</h3>
        </th:block>
    </div>
    <div class="comment-section mb-md-30 mb-sm-30" th:if="${article.allowComment}">
        <h3 class="comment-counter" th:text="${commentVos.size()} + ' 评论'">xx 评论</h3>
        <div class="comment-container mb-10" id="commentContainer">
            <th:block th:each="comment: ${commentVos}">
                <div class="single-comment">
                    <span class="reply-btn" th:if="${loginInfo} != null">
                        <a href="#" th:data="${comment.currentComment.createBy}">回复</a>
                    </span>
                    <div class="image">
                        <img th:src="${comment.currentComment.userAvatar}" alt="">
                    </div>
                    <div class="content">
                        <h3 class="user">
                            [[${comment.currentComment.userName}]]
                            <span class="comment-time">
                                [[${pageService.fmtDate(comment.currentComment.createAt)}]]
                            </span>
                        </h3>
                        <p class="comment-text" th:text="${comment.currentComment.commentContent}"></p>
                    </div>
                </div>
                <th:block th:each="child: ${comment.childCommentVos}">
                    <div class="single-comment reply-comment">
                        <span class="reply-btn" th:if="${loginInfo} != null">
                            <a href="#" th:data="${child.createBy}">回复</a>
                        </span>
                        <div class="image">
                            <img th:src="${child.userAvatar}" alt="">
                        </div>
                        <div class="content">
                            <h3 class="user">
                                [[${child.userName}]]
                                <span class="comment-time">
                                    [[${pageService.fmtDate(child.createAt)}]]
                                </span>
                            </h3>
                            <p class="comment-text" th:text="${child.commentContent}">xxx</p>
                        </div>
                    </div>
                </th:block>
            </th:block>
        </div>
    </div>
</article>
<div th:replace="index/common/bottom_footer"></div>
<a href="#" class="scroll-top"></a>

<script th:replace="index/common/base_script"></script>
<script th:src="@{//cdn.bootcss.com/highlight.js/9.9.0/highlight.min.js}"></script>
<script th:src="@{/plugins/request/axios.min.js}"></script>
<script th:src="@{/plugins/request/request.js}"></script>
<script th:src="@{/index/js/show-article.js}"></script>
<script th:src="@{/index/js/comment.js}"></script>
</body>
</html>
